<template>
    <div class="contact-us">
        <Header></Header>
        <div class="contact-nr">
            <div class="ctop"></div>
            <div class="lxfs">
                <h3>{{ contentObj.title }}</h3>
                <div style="margin-left: 40px" v-html="contentObj.content"></div>
            </div>
        </div>
        <Footer></Footer>
        <Services></Services>
    </div>
</template>
<script>
import Header from "../../components/Header.vue";
import Footer from "../../components/Footer.vue";
import Services from "../../components/Services.vue";
export default {
  name: "ContactUs",
  components: { Header, Footer, Services},
  data() {
    return {
        pageId: '',
        contentObj: {}
    };
  },
  methods: {
    async getFootContent() {
        const res = await this.$request.get(`api/index/single_page?id=${this.pageId}`);
        if (res.code === 1) {
            this.contentObj = res.data || {};
        }
    },
  },
  mounted() {
    this.pageId = this.$route.query.id;
    this.getFootContent();
  },
  watch: {
    $route(to, from) {
      if (to.query.id !== from.query.id) {
        this.pageId = to.query.id;
        this.getFootContent();
      }
    },
  }
};
</script>
<style lang="less" scoped>
.contact-nr{
    text-align: left;
    margin-top: 80px;
    .ctop{
        max-width: 1200px;
        height: 120px;
        background: linear-gradient(90deg, #dbe5fe 0%, #81c9ff 100%);
        margin: 0 auto;
    }
    .lxfs{
        width: 1160px;
        height: 654px;
        background: #FFFFFF;
        box-shadow: 0px 0px 12px 0px rgba(0,69,207,0.08);
        border-radius: 8px;
        margin: -100px auto 20px;
        h3{
            font-weight: 500;
            font-size: 24px;
            color: #000000;
            margin-left: 40px;
            padding-top: 40px;
        }
        ul{
            li{
                list-style: none;
                font-weight: 400;
                font-size: 14px;
                line-height: 30px;
                color: #000000;
            }
            p{
                font-weight: 500;
                font-size: 18px;
                color: #000000;
            }
        }
    }
}
</style>